<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Simple Canvas Game</title>
</head>

<body>
    <canvas id="myCanvas" width="320" height="568" style="border:1px solid #d3d3d3;">
    </canvas>
    <script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#00ffff";
    ctx.fillRect(0, 0, 400, 300);
    ctx.fillRect(0, 120, 100, 100);
    var n = 0;
    var dx = 150;
    var dy = 150;
    var s = 100;
    ctx.beginPath();
    ctx.strokeRect(120, 120, 100, 100);
    ctx.fillStyle = "rgba(100,0,255,255)";
    ctx.strokeStyle = "rgba(0,0,100)";
    var x = Math.sin(0);
    var y = Math.cos(0);
    var dig = Math.PI / 15 * 11;
    for (var i = 0; i < 30; i++) {
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        ctx.lineTo(dx + x * s, dy + y * s);
    }
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    </script>
</body>

</html>
